<template>
	<view class="wrap" :class="lang">
		<u-navbar :is-fixed="true" :customBack="fanhui()" back-icon-name="arrow-leftward">
			<view class="slot-wrap heigh150">
				<u-tabs-swiper
					activeColor="#0895FB "
					bg-color="rgba(255,255, 255, 0)"
					inactive-color="#5e5e5e"
					height="60"
					ref="tabs"
					:list="listnav"
					:current="current"
					@change="change"
					:is-scroll="false"
					swiperWidth="680"
				></u-tabs-swiper>
			</view>
		</u-navbar>
		<view class="vcontent">
			<swiper class="swiper-box" duration="100" :current="swiperCurrent" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="contentitem">
							<view class="subject-video-layout" v-if="videolist.length > 0">
								<videoitems
									v-if="videolist.length > 0"
									v-for="(item, index) in videolist"
									:key="index"
									:lang="lang"
									:ids="item.vid"
									:pic="item.imgurl"
									:title="item.name"
									:count="item.bofangcount"
									:itemlist="item"
								></videoitems>
							</view>
							<view style="text-align: center; height: 500rpx; line-height: 300rpx;" v-if="videolist.length == 0">
								暂无视频
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-box fontcn">
					<view class="brbos"></view>
					<view class="mediaoptions">
						<view class="optionview mediaautos">是否开启灯光语音连续播放(每道题间隔5秒)</view>
						<view class="optionview"><u-switch v-model="audioauto" active-color="#0DA0FF" size="30" inactive-color="#eee"></u-switch></view>
					</view>
					<view class="brbos"></view>
					<view class="mediacontrol">
						<view id="mpplayer" class="mediacontrolview" @click="nextplay(0)"><view class="playcon">上一个</view></view>
						<view class="mediacontrolview">
							<view class="playcount">{{ audioCurrent + 1 }}/{{ audiojson.length }}</view>
						</view>
						<view class="mediacontrolview" @click="nextplay(1)"><view class="playcon">下一个</view></view>
					</view>
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="audio-box">
							<view class="audio-row">
								<swiper style="height: 100vh;" duration="100" :current="audioCurrent" @change="animationfinishaudio">
									<swiper-item class="swiper-item" v-for="(item, index) in audiojson" :key="index">
										<scroll-view scroll-y>
											<view class="audioview font-30">
												<view class="audio-item" @click="audioplay(index, -1, item.audios)" v-bind:class="playindex == '-1' ? 'audioaction' : ''">
													<view class="audioicon">
														<view class="audioiconbg">
															<image v-bind:src="playindex === '-1' ? '../../static/media/audio2.png' : '../../static/media/cardeng.png'"></image>
														</view>
													</view>
													<view class="audiotext">
														<text>{{ item.titles }}</text>
													</view>
												</view>

												<view
													class="audio-item"
													v-for="(itemaudio, indexaudio) in item.option"
													:key="indexaudio"
													@click="audioplay(index, indexaudio, itemaudio.audio)"
													v-bind:class="playindex == indexaudio ? 'audioaction' : ''">
													<view class="audioicon">
														<view class="audioiconbg">
															<image v-bind:src="playindex == indexaudio ? '../../static/media/audio2.png' : '../../static/media/cardeng.png'"></image>
														</view>
													</view>
													<view class="audiotext">
														<view class="audiotextask">{{ itemaudio.title }}</view>
														<view class="audiotextanswer">操作：{{ itemaudio.operation }}</view>
													</view>
												</view>
											</view>
										</scroll-view>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
//接口
import {
	videolist_api //视频列表接口
} from '@/api/index';
import dengjson from '@/common/media.js';
import videoitems from '@/components/videoitem/videoitem.vue';
const innerAudioContext = uni.createInnerAudioContext();
var timeoutID;
var timeoutIDs;
export default {
	components: {
		videoitems //视频模块
	},
	data() {
		return {
			lang: this.$i18n.locale,
			audioauto: true,
			audioCurrent: 0,
			audiojson: [],
			audiosrc: '',
			playindex: -2, //正在播放的音频
			endplay: false,
			defualtimg: '../../static/media/audio2.png',
			//tabs
			listnav: [
				{
					name: this.$t('mediatxt.灯光视频')
				},
				{
					name: this.$t('mediatxt.灯光语音')
				}
			],
			current: 1,
			swiperCurrent: 1,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
			videolist: [],
			vtype: 1 //灯光
		};
	},
	onBackPress() {
		console.log('点击返回键：onBackPress');
		var that = this;
		that.audioauto = false;
		clearTimeout(timeoutID);
		clearTimeout(timeoutIDs);
		innerAudioContext.stop();
		// uni.navigateTo({
		//     url: '@/pages/index/index'
		// });
	},

	onUnload() {
		console.log('点击返回键：onUnload()');
		innerAudioContext.stop();
	},
	onLoad(options) {
		var that = this;
		//正式环境通用
		console.log(dengjson[1].option[0]);
		that.audiojson = dengjson;
		that.videolists();
		//正式结束
		//演示
		if (options.cuunt == '1') {
			that.current = 1;
			that.swiperCurrent = 1;
		}
		if (options.cuunt == '0') {
			that.current = 0;
			that.swiperCurrent = 0;
		}
	},
	methods: {
		videolists: function() {
			var that = this;
			console.log('jinru video list');
			that.https({
				url: videolist_api,
				method: 'POST',
				header: {
					'content-type': 'application/json'
				},
				data: {
					type: 1
					
				},
				success: res => {
					console.log(res);
					that.videolist = res.kemu;
					// that.kemu3videolist = res.kemu3;
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		reachBottom() {
			// 此tab为空数据
			console.log('jiazai');
			
		},
		fanhui() {
			console.log('dinaji fanhui');
		},
		// 播放音频
		audioplay(index, indexs, asrc) {
			var that = this;
			console.log(index, indexs, asrc);
			that.endplay = false;

			//1,0
			if (that.audioauto === true) {
				that.autoaudioplay(index, indexs);
			} else {
				that.danaudioplay(index, indexs, asrc);
			}
		},
		danaudioplay(index, indexs, asrc) {
			var that = this;

			console.log('单独播放', indexs);

			innerAudioContext.src = asrc;

			innerAudioContext.play();
			innerAudioContext.onPlay(function() {
				that.playindex = indexs;
			});

			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			innerAudioContext.onEnded(function(res) {
				innerAudioContext.stop();
			});
		},
		//自动播放
		audioonplay(index, indexs, asrc, defualt) {
			var that = this;
			console.log('vvvvv', indexs);
			console.log(index, indexs, asrc, defualt)

			innerAudioContext.stop();
			innerAudioContext.src = asrc;
			timeoutIDs = setTimeout(function() {
				innerAudioContext.play();
			}, 50);
			innerAudioContext.onPlay(function() {
				that.playindex = defualt;
			});
			console.log('循环播放');
			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			//自动播放
			innerAudioContext.onEnded(function(res) {
				//播放结束了！
				console.log('播放结束了！');
				clearTimeout(timeoutIDs);
				innerAudioContext.stop();
				clearTimeout(timeoutID);
				if (that.audioauto === true) {
					timeoutID = setTimeout(function() {
						that.autoaudioplay(index, indexs);
					}, 4950);
				}
				// console.log(res);
			});
		},
		endaudioplay(index, indexs, asrc, defualt) {
			clearTimeout(timeoutID);
			var that = this;
			that.endplay = true;
			innerAudioContext.onPlay(function() {
				that.playindex = defualt;
			});
			that.defualtimg = '../../static/media/cardeng.png';
			console.log('单独播放');
			innerAudioContext.stop();
			innerAudioContext.src = asrc;
			timeoutIDs = setTimeout(function() {
				innerAudioContext.play();
			}, 50);

			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			innerAudioContext.onEnded(function(res) {
				clearTimeout(timeoutIDs);
				that.playindex = -2;
				that.defualtimg = '../../static/media/audio2.png';
			});
		},
		//自动播放下一个音频
		autoaudioplay(indexq, indexsq) {
			console.log("autoaudioplay",indexq, indexsq)
			clearTimeout(timeoutID);
			var that = this;
			innerAudioContext.stop();
			var playjson = that.audiojson[indexq]; //全部json
			var audio_json = playjson.option; //全部声音json
			var audiocount = audio_json.length - 1; //音频数量
			if (indexsq === -1) {
				// 第一个音频  播放第一个音频
				console.log('第一个音频');
				console.log(indexq, 0, playjson.audios);

				// that.playindex = -1;
				that.defualtimg = '../../static/media/cardeng.png';
				that.audioonplay(indexq, 0, playjson.audios, -1);
			} else {
				var nextaudio = indexsq + 1;
				console.log('nextaudio', nextaudio);
				console.log('audiocount', audiocount);
				console.log('indexsq', indexsq);

				// if(that.endplay === true){
				// 	return false;
				// }

				if (audiocount === indexsq) {
					//没有播放音频了
					console.log('没有播放音频了0000');
					innerAudioContext.stop();
					clearTimeout(timeoutID);
					clearTimeout(timeoutIDs);

					that.defualtimg = '../../static/media/cardeng.png';
					if (that.endplay == true) {
						return false;
					}
					// that.playindex = indexsq;
					that.endaudioplay(indexq, nextaudio, audio_json[indexsq].audio, indexsq);
					return false;
				} else {
					clearTimeout(timeoutID);
					clearTimeout(timeoutIDs);
					that.endplay = false;
					// that.playindex = indexsq;
					that.defualtimg = '../../static/media/cardeng.png';
					that.audioonplay(indexq, nextaudio, audio_json[indexsq].audio, indexsq);
				}
			}
			//console.log(playjson);
		},
		//上一个，下一个音频
		nextplay(n) {
			var that = this;
			var acount = that.audioCurrent;
			var atabindex = that.audiojson.length - 1;
			console.log(acount, atabindex);
			innerAudioContext.stop();
			that.playindex = -2;
			clearTimeout(timeoutID);
			clearTimeout(timeoutIDs);
			if (n == 0) {
				if (acount === 0) {
					return false;
				}
				that.audioCurrent = acount - 1;
			} else {
				if (acount === atabindex) {
					return false;
				}
				that.audioCurrent = acount + 1;
			}
		},
		// 切换声音选项
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinishaudio(e) {
			var that = this;
			let current = e.detail.current;
			if (that.audioauto === true) {
				innerAudioContext.stop();
				that.playindex = -2;
				clearTimeout(timeoutID);
				clearTimeout(timeoutIDs);
			}

			this.audioCurrent = current;
		},
		// tab栏切换
		change(index) {
			var that = this;
			this.swiperCurrent = index;
			that.playindex = -2;
			clearTimeout(timeoutID);
			clearTimeout(timeoutIDs);
			innerAudioContext.stop();
			//this.getOrderList(index);
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			clearTimeout(timeoutID);
			clearTimeout(timeoutIDs);
			innerAudioContext.stop();
		}
	}
};
</script>

<style>
	/*  #ifdef  APP-PLUS  */
	.wrap {
		display: flex;
		flex-direction: column;
		/* height: calc(100vh - var(--window-top)); */
		height: calc(100vh - 44px);
		/* height: 100vh; */
		width: 100%;
	}
	/*  #endif  */
/*  #ifdef  MP-WEIXIN  */
	.wrap {
		display: flex;
		flex-direction: column;
		/* height: calc(100vh - var(--window-top)); */
		height: calc(100vh - 0px);
		/* height: 100vh; */
		width: 100%;
	}
	/*  #endif  */
.swiper-box {
	flex: 1;
	height: 100%;
}
.slot-wrap {
	width: 500rpx;
	margin: 0 auto;
}
/* 音频布局 */
.audioview {
	padding-top: 20rpx;
}
.audio-item {
	width: 700rpx;
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
}
.audioicon {
	width: 70rpx;
	min-height: 70rpx;
	display: inline-block;
}
.audioiconbg {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background: #1794f4;
	text-align: center;
	vertical-align: middle;
}
.audioiconbg image {
	width: 40rpx;
	height: 40rpx;
	padding-top: 10rpx;
	padding-left: 11rpx;
}
.audiotext {
	width: 630rpx;
	display: inline-block;
	text-align: initial;
}
.audiotextask {
	width: 630rpx;
}
.audiotextanswer {
	width: 630rpx;
	color: #007aff;
}
.audioaction .audioiconbg {
	background: #0bd34e;
}
.audioaction .audiotext {
	color: #0bd34e;
}
/* 灯光操作 */
.fontcn {
	font-family: 'Courier New', Courier, monospace;
}
.brbos {
	width: 750rpx;
	height: 10rpx;
}
.mediaoptions {
	width: 750rpx;
	padding-top: 10rpx;
	padding-bottom: 5rpx;
	display: flex;
	justify-content: center;
	text-align: center;
	flex-flow: row wrap;
	box-shadow: 0 -10rpx 10rpx -7rpx #e4e7ed, 0 10rpx 10rpx -7rpx #e4e7ed;
}
.optionview {
	display: inline-block;
}
.mediaautos {
	padding-right: 20rpx;
}

.mediacontrol {
	width: 750rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	text-align: center;
	flex-flow: row wrap;
	box-shadow: 0 -10rpx 10rpx -7rpx #e4e7ed, 0 10rpx 10rpx -7rpx #e4e7ed;
}
.mediacontrolview {
	width: 200rpx;
	height: 60rpx;
	padding-top: 15rpx;
}
.playcon {
	width: 150rpx;
	height: 50rpx;
	border: 1rpx solid #0DA0FF;
	color: #0DA0FF;
	border-radius: 200rpx;
	line-height: 50rpx;
}
.playcount {
	width: 180rpx;
	margin: 0 auto;
	height: 60rpx;
	line-height: 60rpx;
}

.audio-box {
	width: 750rpx;
	height: 80vh;
}
.audio-row {
	width: 700rpx;
	margin: 0 auto;
}

.vcontent {
	padding-top: 20rpx;
	height: 100%;
	width: 100%;
}
.contentitem {
	width: 680rpx;
	margin: 0 auto;
}
/* 视频模块 */
.subject-video-layout {
	width: 680rpx;
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}
</style>
